<template>
  <div>
    <div v-if="flag == 0" style="padding: 10px">
      <header style="margin-top: 10px">
        <div style="margin-top: 10px; margin-bottom: 10px">
          <el-form
            ref="elForm"
            label-width="100px"
            :model="formData"
            size="medium"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="收货人姓名" prop="goodinid">
                  <el-input
                    v-model="formData.cus_name"
                    clearable
                    placeholder="请输入"
                    @keyup.enter.native="search()"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机号" prop="goodinid">
                  <el-input
                    v-model="formData.tel"
                    clearable
                    placeholder="请输入"
                    @keyup.enter.native="search()"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="下单时间" prop="goodinid">
                  <el-date-picker
                    v-model="valu"
                    align="right"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    style="width: 400px"
                    type="daterange"
                    unlink-panels
                    value-format="yyyy-MM-dd"
                    @change="pickerChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="商品名称" prop="goodinid">
                  <el-input
                    v-model="formData.goods_name"
                    clearable
                    placeholder="请输入"
                    @keyup.enter.native="search()"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="订单状态">
                  <el-select
                    v-model="activeName"
                    placeholder="请选择"
                    @change="selectState"
                  >
                    <el-option
                      v-for="(val, key, index) in commodityLabel"
                      :key="index"
                      :label="val"
                      :value="key"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-button
                  style="margin-left: 30px"
                  type="primary"
                  @click="search"
                >
                  搜索
                </el-button>
                <el-button
                  v-permissions="{ permission: ['export:OrderList'] }"
                  style="margin-left: 10px"
                  @click="exporta()"
                >
                  导出
                </el-button>
                <el-button
                  v-permissions="{ permission: ['export-view:OrderList'] }"
                  style="margin-left: 10px"
                  type="text"
                  @click="exportList()"
                >
                  查看已导出列表
                </el-button>
              </el-col>
              <div></div>
            </el-row>
          </el-form>
        </div>
      </header>

      <main v-loading="tableLoad" style="margin-top: 15px">
        <!-- 标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane
            v-for="(val, key) in commodityLabel"
            :key="key"
            :label="val"
            :name="key"
            :val="key"
          >
            <table class="tftable">
              <thead>
                <tr>
                  <td colspan="1" style="width: 500px">商品</td>
                  <td colspan="1" style="width: 100px; text-align: center">
                    订单价格(元)/数量
                  </td>
                  <td colspan="1" style="width: 100px; text-align: center">
                    买家
                  </td>
                  <td colspan="1" style="width: 100px; text-align: center">
                    实收金额
                  </td>
                  <td colspan="1" style="width: 100px; text-align: center">
                    订单状态
                  </td>
                </tr>
              </thead>

              <tbody v-for="(item, indexs) in tableData" :key="indexs">
                <tr style="background: #f5f7fa">
                  <td colspan="1" style="width: 500px">
                    <div style="display: flex; justify-content: space-between">
                      订单号:{{ item.order_sn }} 下单时间:{{ item.created_at }}
                    </div>
                  </td>
                  <td colspan="1" style="width: 100px">
                    <div style="width: 100px; margin-left: 30%">
                      总价:{{ item.pay_amount }}
                    </div>
                  </td>
                  <td colspan="3" style="width: 100px; text-align: center">
                    <el-button
                      v-permissions="{ permission: ['order-view:OrderList'] }"
                      type="text"
                      @click="details(item)"
                    >
                      查看详情
                    </el-button>
                    <el-button
                      v-permissions="{ permission: ['order-view:OrderList'] }"
                      type="text"
                      @click="prints(item)"
                    >
                      打印
                    </el-button>
                  </td>
                </tr>
                <tr>
                  <td style="width: 500px">
                    <div
                      v-for="(itemse, index) in item.order_item"
                      :key="index"
                      style="height: 50px; margin-top: 10px"
                    >
                      <div>
                        <div>
                          <div style="color: #1890ff">
                            {{ itemse.goods_name }}
                          </div>
                          <br />
                          <div style="color: #626b7d">
                            {{ itemse.attribute_name }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td style="100px;text-align: center">
                    <div
                      v-for="(itemse, index) in item.order_item"
                      :key="index"
                      style="height: 50px; margin-top: 10px"
                    >
                      <div>
                        <div>{{ itemse.item_price }}元</div>
                        <br />
                        <div>{{ itemse.item_qty }}件</div>
                      </div>
                    </div>
                  </td>
                  <td style="100px;text-align: center">
                    <div>
                      <div>{{ item.customer_name }}</div>
                      <br />
                      <div>{{ item.customer_tel }}</div>
                    </div>
                  </td>
                  <td style="100px;text-align: center">
                    {{ item.pay_amount }}
                  </td>
                  <td style="100px;text-align: center">
                    <div v-if="item.ord_status == 'wait'">待结算</div>
                    <div v-if="item.ord_status == 'delivered'">已发货</div>
                    <div v-if="item.ord_status == 'complete'">订单完成</div>
                    <div v-if="item.ord_status == 'cancel'">订单关闭</div>
                    <div v-if="item.ord_status == 'aftersale'">售后处理中</div>
                    <div v-if="item.ord_status == 'alreadypaid'">已付款</div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              v-if="tableData.length == 0"
              style="height: 80px; text-align: center; line-height: 80px"
            >
              暂无数据
            </div>
          </el-tab-pane>
        </el-tabs>
      </main>
      <el-pagination
        v-if="total >= 10"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        :before-close="handleClose"
        title="批量导出订单"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <el-descriptions border class="margin-top" :column="4">
          <el-descriptions-item
            label="订单状态"
            :label-style="{ 'font-size': '16px' }"
          >
            <div>
              <div style="font-size: 16px">
                {{ commodityLabel[activeName] }}
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="收货人姓名"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">{{ formData.cus_name || '-' }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="商品名称"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">{{ formData.goods_name || '-' }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="手机号"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">{{ formData.tel || '-' }}</div>
          </el-descriptions-item>
          <el-descriptions-item
            label="时间"
            :label-style="{ 'font-size': '16px' }"
          >
            <div style="font-size: 16px">
              {{ formData.start_date + '-' + formData.end_date || '-' }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="Export">添加导出列表</el-button>
        </span>
      </el-dialog>
      <el-dialog title="导出" :visible.sync="ExportDialogVisible" width="30%">
        <el-table :data="exportData" style="width: 100%">
          <el-table-column label="日期" prop="updated_at" />
          <el-table-column label="操作">
            <template slot-scope="scoped">
              <el-button
                v-permissions="{ permission: ['download:OrderList'] }"
                type="text"
                @click="download(scoped.row)"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ExportDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <el-dialog
      title="订单信息"
      :visible.sync="printTestDialogVisible"
      width="50%"
    >
      <div id="printTests">
        <div class="UserPrint">
          <div>姓名:{{ orderList.customer_name }}</div>
          <div>手机号:{{ orderList.customer_tel }}</div>
          <div>总价:{{ orderList.ord_amount }}</div>
        </div>

        <table class="tftable" style="width: 98%">
          <thead>
            <tr>
              <td colspan="1">商品名称</td>
              <td colspan="1">规格名称</td>
              <td colspan="1">数量</td>
              <td colspan="1">单价</td>
              <td colspan="1">合计</td>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(items, k) in orderList.order_item" :key="k">
              <td>{{ items.goods_name }}</td>
              <td>{{ items.attribute_name }}</td>
              <td>{{ items.item_qty }}</td>
              <td>{{ items.item_price }}</td>
              <td>{{ items.total_amount }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="printTestDialogVisible = false">取 消</el-button>
        <el-button
          v-permissions="{ permission: ['order-view:OrderList'] }"
          v-print="'#printTests'"
        >
          打印
        </el-button>
      </span>
    </el-dialog>

    <div v-if="flag == 1">
      <OrderDetails :orderid="orderid" @showMain="showMain" />
    </div>
  </div>
</template>

<script>
  import {
    getOrderList,
    orderSearchCondition,
    orderLog,
    orderExport,
  } from '@/api/order'
  //

  import OrderDetails from './components/orderDetails.vue'

  export default {
    components: {
      OrderDetails,
    },
    data() {
      return {
        formData: {
          page: 1, // 用作请求商品列表时的分页参数
          pagesize: 10, // 控制分页显示的页码数
          order_status: 'all',
        },
        dialogVisible: false, //Dialog 对话框
        valu: '',
        flag: 0,
        tableLoad: false, // 表格加载样式显示隐藏
        tableData: [], // 存放后端获取到的商品列表信息
        forms: {},
        ExportDialogVisible: false,
        printTestDialogVisible: false,
        // 商品标签页
        commodityLabel: {},
        exportData: [],
        activeName: 'all',
        startus: '',
        // 表格功能按钮
        total: '',
        orderid: '',
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
        orderList: {},
        printk: {
          id: 'printTests',
          popTitle: '配置页眉标题', // 打印配置页上方的标题
          extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        },
      }
    },
    watch: {},
    created() {
      this.init()
    },
    methods: {
      init() {
        this.tableLoad = true
        if (
          this.formData.order_status == 'already_verify' ||
          this.formData.order_status == 'wait_verify'
        ) {
          const obj = this.formData
          obj.verify_status = this.formData.order_status
          delete obj.order_status

          getOrderList(obj).then((e) => {
            this.tableData = e.data.data
            this.total = e.data.total
            this.tableLoad = false
          })
        } else {
          const obj = this.formData
          delete obj.verify_status
          getOrderList(obj).then((e) => {
            this.tableData = e.data.data
            this.total = e.data.total
            this.tableLoad = false
          })
        }
        orderSearchCondition().then((e) => {
          this.commodityLabel = e.data.order_status
        })
      },
      // 导出
      Export() {
        if (
          this.formData.order_status == 'already_verify' ||
          this.formData.order_status == 'wait_verify'
        ) {
          this.formData.verify_status = this.formData.order_status
          delete this.formData.order_status
        } else {
          delete this.formData.verify_status
        }
        orderExport(this.formData).then(() => {
          // const url = e.data.base_url + e.data.src
          // window.open(url)
          this.$message({
            message: '已添加导出列表',
            type: 'success',
          })
          this.exportList()
          this.dialogVisible = false
        })
      },
      // 导出列表
      exportList() {
        orderLog().then((e) => {
          this.exportData = e.data
          this.ExportDialogVisible = true
        })
      },
      download(e) {
        // const url = 'http://fan.jb.cc/' + e.src
        const url = e.base_url + e.src
        window.open(url)
      },
      // 选择订单状态
      selectState(e) {
        this.activeName = e
        this.formData.order_status = e
        this.init()
      },
      // 标签页 tab
      handleClick(e) {
        this.formData.order_status = e.paneName
        this.formData.page = 1
        this.init()
      },
      filterTableData() {},
      filterLoading() {},
      pickerChange(e) {
        if (e == null) {
          this.formData.start_date = ''
          this.formData.end_date = ''
        } else {
          this.formData.start_date = e[0]
          this.formData.end_date = e[1]
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      // 搜索
      search() {
        this.formData.page = 1
        this.init()
      },
      // 导出
      exporta() {
        if (this.valu) {
          this.dialogVisible = true
        } else {
          this.$message({
            message: '请选择日期和时间',
            type: 'warning',
          })
        }
      },
      Reset() {},
      // 详情
      details(e) {
        this.flag = 1
        this.orderid = e.id
      },
      prints(e) {
        console.log(e)
        this.orderList = e
        this.printTestDialogVisible = true
      },
      // 返回
      showMain(e) {
        this.flag = e
        // this.init()
      },
      // 下一页
      handleCurrentChange(val) {
        const _this = this
        _this.formData.page = val
        this.init()
      },
    },
  }
</script>

<style scoped>
  .borderBoot {
    display: flex;
  }
  .borderBoot :after {
    border-bottom: 1px solid #d1c6c6;
    display: flex;
    width: 50%;
  }

  .commodity_info_box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .goods {
    line-height: 40px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px;
  }
  .goodsa {
    line-height: 40px;
    font-size: 13px;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
  }
  /* .goodsor {
    width: 200px;
    line-height: 40px;
    font-size: 15px;
  } */
  .goodstest {
    font-size: 15px;
    width: 22%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 99%;
    border-width: 1px;
    border-collapse: collapse;
    /* text-align: center; */

    /* text-align: center; */
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    /* text-align: center; */

    height: 50px;
  }

  .tftable {
    /* margin-left: 1%; */
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .UserPrint {
    padding-top: 20px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid;
    padding-bottom: 10px;
  }
</style>
